<template>
    <div v-loading="showLoading">
      <div class="result-title">
        <span>系统匹配推荐产品结果</span>
      </div>
      <div class="product-box" v-if="productList">
        <el-table :data="recommendedProducts" border>
          <el-table-column width="350" label="产品名称">
            <template slot-scope="scope">
              <div class="productNameStyle">
                <div class="image">
                  <el-image
                    style="width: 80px; height: 80px"
                    :src="scope.row.productPic"
                    :preview-src-list="[scope.row.productPic]"
                  >
                  </el-image>
                </div>
                <div class="name-msg">
                  <div style="color: #222; font-weight: bold">
                    {{ scope.row.productName }}
                  </div>
                  <div style="color: #999">ID: {{ scope.row.productId }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="产品所属银行">
            <template slot-scope="scope">
              <span>{{ scope.row.bankName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="额度区间">
            <template slot-scope="scope">
              <span
                >{{ scope.row.productMinQuota }}万 -
                {{ scope.row.productMaxQuota }}万</span
              >
            </template>
          </el-table-column>
          <el-table-column label="可贷额度">
            <template slot-scope="scope">
              <el-input-number
                class="my-el-input-number"
                v-if="!flagValue"
                v-model="scope.row.quota"
                controls-position="right"
                @change="handleChange($event, scope.row)"
                :min="0"
                :max="scope.row.productMaxQuota"
              >
              </el-input-number>
              <span v-if="flagValue">{{ scope.row.quota }}万</span>
            </template>
          </el-table-column>
  
          <el-table-column v-if="!flagValue" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="goProductDetails(scope.row.productId)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pageRight"
          :current-page.sync="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageDate.pageSize"
          layout="total,sizes, prev, pager, next"
          :total="pageDate.total"
          :page-count="pageDate.pageCount"
        >
        </el-pagination>
        <!-- 系统不推荐产品结果 -->
        <div class="result-title">
          <div style="margin:20px 0px">系统不推荐产品结果</div>
          <!-- <span>勾选或添加适合客户的产品</span> -->
        </div>
        <el-table :data="NonRecommendedProducts" border>
          <el-table-column width="350" label="产品名称">
            <template slot-scope="scope">
              <div class="productNameStyle">
                <div class="image">
                  <el-image
                    style="width: 80px; height: 80px"
                    :src="scope.row.productPic"
                    :preview-src-list="[scope.row.productPic]"
                  >
                  </el-image>
                </div>
                <div class="name-msg">
                  <div style="color: #222; font-weight: bold">
                    {{ scope.row.productName }}
                  </div>
                  <div style="color: #999">ID: {{ scope.row.productId }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="产品所属银行">
            <template slot-scope="scope">
              <span>{{ scope.row.bankName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="额度区间">
            <template slot-scope="scope">
              <span
                >{{ scope.row.productMinQuota }}万 -
                {{ scope.row.productMaxQuota }}万</span
              >
            </template>
          </el-table-column>
          <el-table-column label="不推荐原因">
            <template slot-scope="scope">
              <span>{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
  
          <el-table-column v-if="!flagValue" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="goProductDetails(scope.row.productId)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="nonHandleSizeChange"
          @current-change="nonHhandleCurrentChange"
          class="pageRight"
          :current-page.sync="noCurrentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="noPageDate.pageSize"
          layout="total,sizes, prev, pager, next"
          :total="noPageDate.total"
          :page-count="noPageDate.pageCount"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  <script>
  // import { getBankList } from "@/api/system";
  import { saveAloneQuota } from "@/api/customer";
  import { getProjectList, getBankProductList } from "@/api/product";
  export default {
    name: "developPlan",
    props: {
      detailInfo: {
        type: Object,
        default: () => {
          return {};
        }
      },
      searchType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // bankList: [],
        recommendedProducts: [],
        NonRecommendedProducts: [],
        bankId: "",
        productId: "",
        productList: [],
        selectProduct: [],
        errRes: "",
        flagValue: false,
        showLoading: false,
        currentPage: 1,
        noCurrentPage: 1,
        pageDate: {
          pageNum: 1,
          pageSize: 5
        },
        noPageDate: {
          pageNum: 1,
          pageSize: 5
        }
      };
    },
    created() {
      this.getProjectList();
      let flagValue = this.$route.path;
      if (flagValue == "/customerMatch") {
        this.flagValue = true;
      }
      console.log("flagValue", flagValue);
    },
    watch: {
      bankId: {
        handler(newVal, oldVal) {
          if (newVal && newVal != oldVal) {
            this.productId = "";
            this.selectProduct = [];
            this.getBankProductList(newVal);
          } else {
            this.productId = "";
            this.selectProduct = [];
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageDate.pageSize = val;
        this.getProjectList();
      },
      handleCurrentChange(val) {
        this.pageDate.pageNum = val;
        this.getProjectList();
      },
      nonHandleSizeChange(val) {
        this.noPageDate.pageSize = val;
        this.getProjectList();
      },
      nonHhandleCurrentChange(val) {
        this.noPageDate.pageNum = val;
        this.getProjectList();
      },
      getBankProductList(id) {
        getBankProductList({
          bankId: id,
          publishStatus: 1
        }).then(res => {
          this.selectProduct = res.data ? res.data : [];
        });
      },
      goProductDetails(idx) {
        let routeData = this.$router.resolve({
          path: "/productDetail", // path 要跳转的路由地址
          // query 要传递的参数
          query: {
            id: idx
          }
        });
        window.open(routeData.href, "_blank");
      },
  
      // console.log(idx);
      // this.productList.splice(idx, 1);
      // },
  
      getProjectList() {
        const stepMaping = {
          "14": 1,
          "15": 2,
          "2": 1,
          "4": 1,
          "9": 1,
          "7": 1,
          "5": 2,
          "10": 2,
          "11": 2,
          "13": 2,
          "12": 3
        };
        console.log(this.detailInfo.matchStep, stepMaping[this.detailInfo.matchStatus], 'kkkk', this.searchType, 'type');
        // return 
        this.showLoading = true;
        let params = {
          matchType: this.detailInfo.matchType,
          matchId: this.detailInfo.id,
          matchStep: this.searchType == 0 ? this.detailInfo.matchStep : stepMaping[this.detailInfo.matchStatus],
          // matchStep: stepMaping[this.detailInfo.matchStatus],
          recommendType: "1",
          ...this.pageDate
        };
        let noParams = {
          matchType: this.detailInfo.matchType,
          matchId: this.detailInfo.id,
          // matchStep: stepMaping[this.detailInfo.matchStatus],
          matchStep: this.searchType == 0 ? this.detailInfo.matchStep: stepMaping[this.detailInfo.matchStatus],
          recommendType: "0",
          ...this.noPageDate
        };
        getProjectList(params).then(res => {
          this.recommendedProducts = res.data.list;
          this.pageDate.pageSize = res.data.pageSize;
          this.pageDate.total = res.data.total;
          this.currentPage = res.data.pageNum;
        });
        getProjectList(noParams).then(res => {
          this.NonRecommendedProducts = res.data.list;
          this.noPageDate.pageSize = res.data.pageSize;
          this.noPageDate.total = res.data.total;
          this.noCurrentPage = res.data.pageNum;
        });
        setTimeout(() => {
          this.showLoading = false;
        }, 2000);
      },
      resetProduct() {},
      addProduct() {
        if (this.productId) {
          const obj = this.selectProduct.find(v => {
            return v.id === this.productId;
          });
          console.log(obj);
  
          const idx = this.productList.findIndex(v => {
            return v.id === obj.id;
          });
          if (idx === -1) {
            this.productList.push(obj);
          } else {
            this.$message({
              message: "该产品已添加",
              type: "warning"
            });
          }
        }
      },
      // getBankList() {
      //   getBankList().then(res => {
      //     this.bankList = res.data;
      //   });
      // },
      handleChange(value, v) {
        let params = {
          id: v.id,
          quota: value
        
        }
        saveAloneQuota(params).then(res=> {
          console.log(res);
        })
  
      },
    }
  };
  </script>
  
  <style scoped lang="scss">
  .my-el-input-number {
    position: relative;
  }
  
  .my-el-input-number::after {
    content: "万";
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .my-el-input-number .el-input__inner {
    // 不加这行的话，当文本框里数值很大时，会和单位重叠
    padding-left: 30px;
    padding-right: 48px;
  }
  
  .result-title {
    display: flex;
    align-items: center;
  
    span,
    div {
      font-weight: 500;
      font-size: 18px;
      color: #222222;
      line-height: 25px;
    }
  }
  
  .product-box {
    margin-top: 20px;
  }
  
  .err-res {
    width: 100%;
    margin-top: 20px;
    display: flex;
  }
  
  .selete-product {
    display: flex;
    align-items: center;
    margin-top: 20px;
  
    .select-bank {
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
  }
  
  .productNameStyle {
    display: flex;
    height: 100px;
  
    .image {
      width: 100px;
      height: 100px;
  
      img {
        width: 100%;
        height: 100%;
      }
    }
  
    .name-msg {
      margin-left: 10px;
      padding: 10px 0;
      height: 80px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
  }
  </style>
  